<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代理绑定管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.10.0/axios.min.js"></script>
    <script src="./script.js"></script>
</head>
<body>
<div class="login-container" id="loginContainer">
    <div class="login-box">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="180" height="120"><path d="M832 665.6v-164.266667c0-17.066667-14.933333-32-32-32h-256v-128H789.333333c23.466667 0 42.666667-19.2 42.666667-42.666666V149.333333c0-23.466667-19.2-42.666667-42.666667-42.666666H234.666667c-23.466667 0-42.666667 19.2-42.666667 42.666666v149.333334c0 23.466667 19.2 42.666667 42.666667 42.666666h245.333333v128h-256c-17.066667 0-32 14.933333-32 32v164.266667c-55.466667 14.933333-96 64-96 123.733333 0 70.4 57.6 128 128 128s128-57.6 128-128c0-59.733333-40.533333-108.8-96-123.733333V533.333333h224v132.266667c-55.466667 14.933333-96 64-96 123.733333 0 70.4 57.6 128 128 128s128-57.6 128-128c0-59.733333-40.533333-108.8-96-123.733333V533.333333H768v132.266667c-55.466667 14.933333-96 64-96 123.733333 0 70.4 57.6 128 128 128s128-57.6 128-128c0-59.733333-40.533333-108.8-96-123.733333zM256 170.666667h512v106.666666H256V170.666667z m32 618.666666c0 36.266667-27.733333 64-64 64s-64-27.733333-64-64 27.733333-64 64-64 64 27.733333 64 64zM576 789.333333c0 36.266667-27.733333 64-64 64s-64-27.733333-64-64 27.733333-64 64-64 64 27.733333 64 64z m224 64c-36.266667 0-64-27.733333-64-64s27.733333-64 64-64 64 27.733333 64 64-27.733333 64-64 64z" fill="#039be5"></path></svg>
        <h1>代理绑定管理系统</h1>
        <div class="input-group">
            <label for="password"><i class="fas fa-lock"></i> 管理口令</label>
            <input type="password" id="password" placeholder="请输入管理口令...">
        </div>
        <button class="btn" id="loginBtn">进入系统</button>
        <p id="loginMessage" style="color: #ef5350; margin-top: 20px; display: none;">口令错误，请重试！</p>
    </div>
</div>

<div class="container" id="mainContainer" style="display: none;">
    <header>
        <div class="logo">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M832 665.6v-164.266667c0-17.066667-14.933333-32-32-32h-256v-128H789.333333c23.466667 0 42.666667-19.2 42.666667-42.666666V149.333333c0-23.466667-19.2-42.666667-42.666667-42.666666H234.666667c-23.466667 0-42.666667 19.2-42.666667 42.666666v149.333334c0 23.466667 19.2 42.666667 42.666667 42.666666h245.333333v128h-256c-17.066667 0-32 14.933333-32 32v164.266667c-55.466667 14.933333-96 64-96 123.733333 0 70.4 57.6 128 128 128s128-57.6 128-128c0-59.733333-40.533333-108.8-96-123.733333V533.333333h224v132.266667c-55.466667 14.933333-96 64-96 123.733333 0 70.4 57.6 128 128 128s128-57.6 128-128c0-59.733333-40.533333-108.8-96-123.733333V533.333333H768v132.266667c-55.466667 14.933333-96 64-96 123.733333 0 70.4 57.6 128 128 128s128-57.6 128-128c0-59.733333-40.533333-108.8-96-123.733333zM256 170.666667h512v106.666666H256V170.666667z m32 618.666666c0 36.266667-27.733333 64-64 64s-64-27.733333-64-64 27.733333-64 64-64 64 27.733333 64 64zM576 789.333333c0 36.266667-27.733333 64-64 64s-64-27.733333-64-64 27.733333-64 64-64 64 27.733333 64 64z m224 64c-36.266667 0-64-27.733333-64-64s27.733333-64 64-64 64 27.733333 64 64-27.733333 64-64 64z" fill="#ffffff"></path></svg>
            <h1>代理绑定管理系统</h1>
        </div>
        <div class="user-info">
            <button class="btn btn-danger" style="width: 120px" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> 退出</button>
        </div>
    </header>

    <div class="tabs">
        <div class="tab active" data-tab="devices">
            <i class="fas fa-network-wired"></i> 在线设备
        </div>
        <div class="tab" data-tab="binds">
            <i class="fas fa-link"></i> S5设备绑定
        </div>
        <div class="tab" data-tab="nodes">
            <i class="fas fa-server"></i> S5代理节点
        </div>
    </div>

    <!-- DHCP设备管理 -->
    <div class="tab-content active" id="devices">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title"><i class="fas fa-list"></i> 设备列表</h2>
                <div class="card-btns">
                    <button class="btn" id="refreshDeviceBtn"><i class="fas fa-sync-alt"></i> 刷新列表</button>
                </div>
            </div>

            <div class="table-container">
                <table>
                    <thead>
                    <tr>
                        <th class="checkbox-cell"><input type="checkbox" id="selectAllDhcp"></th>
                        <th>设备名称</th>
                        <th>MAC地址</th>
                        <th>IP地址</th>
                        <th>类型</th>
                        <th>状态</th>
                        <th>操 作</th>
                    </tr>
                    </thead>
                    <tbody id="devicesList">
                    <!-- DHCP设备列表将通过JS填充 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- S5设备绑定管理 -->
    <div class="tab-content" id="binds">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title"><i class="fas fa-link"></i> S5设备绑定列表</h2>
                <div>
                    <button class="btn" id="refreshBindsBtn"><i class="fas fa-sync-alt"></i> 刷新列表</button>
                    <button class="btn btn-danger" id="deleteBindsBtn"><i class="fas fa-trash-alt"></i> 删除选中</button>
                </div>
            </div>

            <div class="table-container">
                <table>
                    <thead>
                    <tr>
                        <th class="checkbox-cell"><input type="checkbox" id="selectAllS5"></th>
                        <th>设备名称</th>
                        <th>MAC地址</th>
                        <th>IP地址</th>
                        <th>绑定节点</th>
                        <th>备 注</th>
                        <th>状态</th>
                        <th>操 作</th>
                    </tr>
                    </thead>
                    <tbody id="bindsList">
                    <!-- S5绑定列表将通过JS填充 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- S5代理节点管理 -->
    <div class="tab-content" id="nodes">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title"><i class="fas fa-server"></i> S5代理节点列表</h2>
                <div>
                    <button class="btn" id="refreshNodesBtn"><i class="fas fa-sync-alt"></i> 刷新列表</button>
                    <button class="btn btn-danger" id="deleteNodesBtn"><i class="fas fa-trash-alt"></i> 删除选中</button>
                    <button class="btn btn-success" id="addNodesBtn"><i class="fas fa-plus"></i> 添加节点</button>
                </div>
            </div>

            <div class="table-container">
                <table>
                    <thead>
                    <tr>
                        <th class="checkbox-cell"><input type="checkbox" id="selectAllNodes"></th>
                        <th>节点名称</th>
                        <th>服务器地址</th>
                        <th>端口</th>
                        <th>用户名</th>
                        <th>密 码</th>
                        <th>绑定设备</th>
                        <th>操 作</th>
                    </tr>
                    </thead>
                    <tbody id="nodesList">
                    <!-- 节点列表将通过JS填充 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 模态框 -->
<div id="modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle"></h3>
            <span class="close-btn" id="closeModal">&times;</span>
        </div>
        <div class="modal-body" id="modalBody">
            <!-- 动态内容 -->
        </div>
    </div>
</div>
</body>
</html>